<template>
	<div class="app-container">
		<div class="containtable">
			<el-tabs class="el-tabs__header is-left" tab-position="left" size="small">
				<el-tab-pane label="密码设置">
					<el-form  status-icon ref="" style="max-width: 500px;padding-left: 200px;" label-position="" label-width="70px">
						<el-row :gutter="100">
							<el-col :lg="24" :md="24" prop="account">
								<el-form-item label="旧密码" prop="account">
									<el-input type="text" placeholder="请输入密码" v-model="pwd.input1" auto-complete="off" show-password></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="100">
							<el-col :lg="24" :md="24">
								<el-form-item label="新密码" prop="account">
									<el-input type="text" placeholder="请输入密码" v-model="pwd.input2" auto-complete="off" show-password></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<div class="btn"><el-button round type="primary" @click="sub()" @keyup.enter.native="sub">提交</el-button></div>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="修改头像">
					<div class="change-avatar">
						<pan-thumb :image="image" />
						<el-button type="primary" icon="upload" style="position: absolute;bottom: 60px;margin-left: 110px;" @click="imagecropperShow=true">修改头像</el-button>
						<image-cropper
						  v-show="imagecropperShow"
						  :key="imagecropperKey"
						  :width="300"
						  :height="300"
						  :url="url"
						  lang-type="zh"
						  @close="close"
						  @crop-upload-success="cropSuccess"
						/>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import waves from '@/directive/waves' // Waves directive
	import {passwords,editAvatar,ossUpload} from '@/api/admin/system/user' //调用模块接口
	import { Message } from 'element-ui';
	import ImageCropper from '@/components/ImageCropper'
	import PanThumb from '@/components/PanThumb'
	import upload from '@/api/upload'
	import router from '@/router'

	export default {
		name: 'personManage',
		components: { ImageCropper, PanThumb },
		directives: {
			waves
		},
		data() {
			return {
				url:'',
				imagecropperShow: false,
				imagecropperKey: 0,
				image: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
				pwd:{
					input1:'',
					input2:''
				}
			}
		},
		methods: {
			sub(){
				passwords({
					oldPassword:this.pwd.input1,
					password:this.pwd.input2
				}).then(res=>{
					if(res.respCode=='0000'){
						this.pwd.input1 = this.pwd.input2='';
						Message({
						  message: '修改成功，请重新登录',
						  type: 'success',
						  duration: 4 * 1000
						});
						this.logout();
					}
				})
			},
			cropSuccess(resData) {
			  console.log(resData)
			  this.imagecropperShow = false
			  this.imagecropperKey = this.imagecropperKey + 1
			  this.image = resData.urls;
			  this.$store.dispatch('user/changeAvatar', this.image)
			  // alert(this.$route.path+' 缺少修改头像方法');
			},
			close() {
			  this.imagecropperShow = false
			},
			async logout() {
			  await this.$store.dispatch('user/logout')
			  this.$router.push(`/login?redirect=${this.$route.fullPath}`)
			}
		},
		mounted(){
			this.url = upload.base64Url;
			this.image = this.$store.getters.avatar;
		}
	}
</script>

<style>
	.el-row {
		margin-bottom: 10px;
	}
	.el-tabs__item {
		font-size: 14px!important;
	}
	.btn{
		text-align: center;
	}
	.btn button{
		padding: 10px 50px!important;
		margin: 0 auto!important;
	}
	.change-avatar{
		padding-left: 200px;
		padding-bottom: 50px;
	}
	.change-avatar .avatar{
	  width: 200px;
	  height: 200px;
	  border-radius: 50%;
	}
</style>
